<template>
  <div class="app-container">
    <!-- 顶部搜索区域 -->
    <el-form ref="searchClassFormRef" :model="getClassQueryInfo2" :inline="true" :rules="getClassQueryInfo2Rules" class="demo-form-inline">
      <el-form-item prop="clbum_name">
        <el-input v-model="getClassQueryInfo2.clbum_name" placeholder="班级名称" />
      </el-form-item>
      <el-form-item prop="charge_teacher_name">
        <el-input v-model="getClassQueryInfo2.classroom_num" placeholder="教室编号" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getClassInfo(2)">查询</el-button>
        <el-button @click="getClassInfo(1)">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 班级教室展示区域 -->
    <el-table size="medium" border fit highlight-current-row :data="tableData">
      <el-table-column type="selection" width="55px" align="center"></el-table-column>
      <el-table-column type="index" label="序号" width="55px" align="center" prop="index">
        <template slot-scope="scope">
          <span>{{(searchCLassRoomQueryInfo.page - 1) * searchCLassRoomQueryInfo.limit + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="班级名称" prop="className" />
      <el-table-column align="center" label="课程名称" prop="courseName" />
      <el-table-column align="center" label="已加入学生"prop="studentJoinNum" />
      <el-table-column align="center" label="上课老师" prop="studentTeach" />
      <el-table-column align="center" label="上课时间" prop="courseTime" />
      <el-table-column align="center" label="教室名称" prop="classroomNameId" />
      <el-table-column align="center" label="教室编号" prop="classroomName" />
      <el-table-column align="center" label="操作" width="300px">
        <template slot-scope="scope">
          <el-button type="primary" size="small" icon="el-icon-search" @click="see(scope.row)">查看</el-button>
          <el-button type="success" size="small" icon="el-icon-edit" @click="edit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 页码切换 -->
    <div class="bottomPaginationaa">
      <el-pagination :current-page="searchCLassRoomQueryInfo.page" :page-sizes="[6, 10, 15]" :page-size="searchCLassRoomQueryInfo.limit"
        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <!-- 出勤记录查看DIALOG -->
    <el-dialog title="基本信息" :visible.sync="chuqinjiluDialogVisible" width="60%">
      <!-- <div class="divall">
        <div class="div1">
          <div>课程名称: 高中物理提高</div>
          <div>任课老师: 张伟</div>
          <div>上课时间: 09:00 - 11:10</div>
        </div>
        <div class="div2">
          <div>助理老师: 马东</div>
        </div>
      </div> -->
      <el-form class="chakan">
        <el-row>
          <el-col :span="12">
            <el-form-item label="课程名称" label-width="90px">
              <el-input  disabled placeholder="马丹" style="width: 200px;"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="助理老师" label-width="90px">
              <el-input  disabled placeholder="马丹" style="width: 200px;"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="任课老师" label-width="90px">
              <el-input  disabled placeholder="马丹" style="width: 200px;"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="上课时间" label-width="90px">
              <el-input  disabled placeholder="马丹" style="width: 200px;"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="div3">
        <div>
          <h3>学员信息</h3>
        </div>
        <div class="stuInfoDiv">
          <div class="stuInfoDivtubiaoquyu">
            <div>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-dianming" />
              </svg>
            </div>
            <div class="stuInfoDivwenzi">应到: 33人</div>
          </div>
          <div class="stuInfoDivtubiaoquyu">
            <div>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-dianming" />
              </svg>
            </div>
            <div class="stuInfoDivwenzi">已点名： 23人</div>
          </div>
          <div class="stuInfoDivtubiaoquyu">
            <div>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-chidao" />
              </svg>
            </div>
            <div class="stuInfoDivwenzi">迟到： 3人</div>
          </div>
          <div class="stuInfoDivtubiaoquyu">
            <div>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-kuangke-" />
              </svg>
            </div>
            <div class="stuInfoDivwenzi">旷课： 0人</div>
          </div>
          <div class="stuInfoDivtubiaoquyu">
            <div>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-qingjia" />
              </svg>
            </div>
            <div class="stuInfoDivwenzi">请假：2人</div>
          </div>
          <div class="stuInfoDivtubiaoquyu">
            <div>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-dianming" />
              </svg>
            </div>
            <div class="stuInfoDivwenzi">
              <h1>32/48</h1>
            </div>
          </div>
        </div>
        <div class="qiandaoxingming">
          <div>
            <span v-for="(item, index) in qiandaoShuzu" :key="index">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-dianming" /></svg>{{ item.stuName }} ({{ item.stuPhone }})</span>
          </div>
        </div>
      </div>
      <div class="div3">
        <div>
          <h3>签到信息</h3>
        </div>
        <div class="bencikecheng">
          <div>
            <div>本次课程应到：13<!-- {{item.content}} --></div>
            <div>实到：1<!-- {{item.next_time}} --></div>
            <div>迟到：1<!-- {{item.content}} --></div>
            <div>请假：12<!-- {{item.content}} --></div>
          </div>
          <div>迟到名单：
            <div class="xueshengxingming">
              <div>陈晓芳（15812621419）<!-- {{姓名+手机号}} --> </div>
              <div> 迟到事由：起不来床！<!-- {{理由}} --> </div>
            </div>
          </div>
          <div class="qingjiamingdan">请假名单：
            <div class="xueshengxingming">
              <div>陈晓芳（15812621419）<!-- {{姓名+手机号}} --> </div>
              <div> 请假事由事由：起不来床！<!-- {{理由}} --> </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="chuqinjiluDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
  </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        getClassQueryInfo2: {
          limit: 6,
          page: 1,
          clbum_name: '',
          classroom_num: ''
        },
        qiandaoShuzu: [{
          stuName: '陈晓芳',
          stuPhone: '15812621419'
        }, {
          stuName: '陈晓芳',
          stuPhone: '15812621419'
        }, {
          stuName: '陈晓芳',
          stuPhone: '15812621419'
        }, {
          stuName: '陈晓芳',
          stuPhone: '15812621419'
        }, {
          stuName: '陈晓芳',
          stuPhone: '15812621419'
        }, {
          stuName: '陈晓芳',
          stuPhone: '15812621419'
        }, {
          stuName: '陈晓芳',
          stuPhone: '15812621419'
        }, {
          stuName: '陈晓芳',
          stuPhone: '15812621419'
        }, {
          stuName: '陈晓芳',
          stuPhone: '15812621419'
        }, {
          stuName: '陈晓芳',
          stuPhone: '15812621419'
        }, {
          stuName: '陈晓芳',
          stuPhone: '15812621419'
        }, {
          stuName: '陈晓芳',
          stuPhone: '15812621419'
        }, {
          stuName: '陈晓芳',
          stuPhone: '15812621419'
        }, {
          stuName: '陈晓芳',
          stuPhone: '15812621419'
        }, {
          stuName: '陈晓芳',
          stuPhone: '15812621419'
        }, {
          stuName: '陈晓芳',
          stuPhone: '15812621419'
        }, {
          stuName: '陈晓芳',
          stuPhone: '15812621419'
        }],
        chuqinjiluDialogVisible: false,
        // currentPage: 1, // 页数
        // total: 69, // 总数
        // pageSize: 10, // 每页条数
        getClassQueryInfo2Rules: {
          clbum_name: [{
            required: false,
            message: '请输入班级名字',
            trigger: 'blur'
          }],
          classroom_num: [{
            required: false,
            message: '请输入教室编号',
            trigger: 'blur'
          }]
        },
        searchCLassRoomQueryInfo: {
          page: 1,
          limit: 10,
        }, //分页参数
        currentPage: 0, // 页数
        total: 0, // 总数
        tableData: [{
          courseName: '英语',
          classStatus: '进行中',
          className: '新概念一班',
          classroomName: '教室一',
          classroomNameId: 'A01',
          studentJoinNum: '15/50',
          mainTeacher: '张老师',
          helpTeacher: '王老师',
          workTeacher: '曾老师',
          createTime: '2020-12-14',
          courseTime: '周三早上 10:30'
        }, {
          courseName: '英语',
          classStatus: '进行中',
          className: '新概念一班',
          classroomName: '教室一',
          classroomNameId: 'A01',
          studentJoinNum: '15/50',
          mainTeacher: '张老师',
          helpTeacher: '王老师',
          workTeacher: '曾老师',
          createTime: '2020-12-14',
          courseTime: '周三早上 10:30'
        }, {
          courseName: '英语',
          classStatus: '进行中',
          className: '新概念一班',
          classroomName: '教室一',
          classroomNameId: 'A01',
          studentJoinNum: '15/50',
          mainTeacher: '张老师',
          helpTeacher: '王老师',
          workTeacher: '曾老师',
          createTime: '2020-12-14',
          courseTime: '周三早上 10:30'
        }, {
          courseName: '英语',
          classStatus: '进行中',
          className: '新概念一班',
          classroomName: '教室一',
          classroomNameId: 'A01',
          studentJoinNum: '15/50',
          mainTeacher: '张老师',
          helpTeacher: '王老师',
          workTeacher: '曾老师',
          createTime: '2020-12-14',
          courseTime: '周三早上 10:30'
        }, {
          courseTime: '周三早上 10:30',
          courseName: '数学',
          classStatus: '进行中',
          className: '新概念一班',
          classroomName: '教室一',
          classroomNameId: 'A01',
          studentJoinNum: '15/50',
          mainTeacher: '张老师',
          helpTeacher: '王老师',
          workTeacher: '曾老师',
          createTime: '2020-12-14'
        }, {
          courseTime: '周三早上 10:30',
          courseName: '语文',
          classStatus: '进行中',
          className: '新概念一班',
          classroomName: '教室一',
          classroomNameId: 'A01',
          studentJoinNum: '15/50',
          mainTeacher: '张老师',
          helpTeacher: '王老师',
          workTeacher: '曾老师',
          createTime: '2020-12-14'
        }]
      }
    },
    created() {
      this.getClassInfo(1) // 查询出勤记录
    },
    methods: {
      // 处理分页切换
      handleSizeChange(val) {
        this.searchCLassRoomQueryInfo.limit = val
        this.getClassInfo()
      },
      handleCurrentChange(val) {
        this.searchCLassRoomQueryInfo.page = val
        this.getClassInfo()
      },
      // 出勤列表
      searchClassRoomList() {
        // var resData = await searchClassRoom(this.searchCLassRoomQueryInfo)
      },
      // 查看出勤记录
      see(row) {
        this.chuqinjiluDialogVisible = true;
        console.log(row)
      },
      // 编辑出勤记录
      edit(row) {
        this.chuqinjiluDialogVisible = true;
        console.log(row)
      },
      // 条件查询出勤记录
      async getClassInfo(num) {
          if (
              num === 2 &&
      this.getClassQueryInfo2.clbum_name === '' &&
      this.getClassQueryInfo2.classroom_num === ''
          ) {
              this.$message.error('请输入查询条件')
          }
          let queryInfo =
      num === 1 ? this.searchCLassRoomQueryInfo : this.getClassQueryInfo2
      // 接口未改
          const rs = await searchClass(queryInfo)
          if (rs.code !== 200) return
          if (rs.data.list.length === 0) {
              this.$message.error('没有该班级')
              this.$refs.searchClassFormRef.resetFields()
          } else {
              console.log('班级')
              console.log(rs)
              this.classShowTable = rs.data.list
              this.total = rs.data.total
              this.currentPage = rs.data.current_page
              this.$refs.searchClassFormRef.resetFields()
          }
      },
    }
  }
</script>
<style scoped lang='scss'>
  .el-table--mini {
    font-size: 14px;
  }
  .el-scrollbar__wrap {
    overflow-x: hidden !important;
  }
  .chuqin {
    margin-top: 10px, 10px;
  }
  .stuTable {
    div {
      div {
        float: left;
        margin: 5px, 5px;
      }
    }
  }
  .divall {
    font-size: 16px;
    display: flex;
    overflow: auto;
    border-top: 1px solid gray;
    .div1 {
      margin: 16px 0 0 20px;
      div {
        margin-top: 10px;
      }
    }
    .div2 {
      div {
        margin: 20px;
      }
      margin-left: 30%;
      margin-top: 10px;
    }
  }
  .div3 {
    overflow: auto;
    margin-top: 30px;
    border-top: 1px solid gray;
    padding-top: 10px;
  }
  .div4 {
    overflow: auto;
    margin-top: 50px;
    border-top: 1px solid gray;
    padding-top: 10px;
  }
  .bottomPaginationaa {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
  }
  .stuInfoDiv {
    display: flex;
    .stuInfoDivtubiaoquyu {
      display: flex;
      margin-left: 50px;
      align-items: center;
    }
    .stuInfoDivwenzi {
      margin-left: 12px;
    }
  }
  .qiandaoxingming {
    div {
      display: flex;
      flex-wrap: wrap;
      width: 900px;
    }
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 30px 0 0 0;
    span {
      margin: 12px 0 0 50px;
    }
  }
  .bencikecheng {
    font-size: 18px;
    margin: 18px 0 12px 30px;
    div {
      display: flex;
      margin-top: 12px;
    }
  }
  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    font-size: 30px;
  }

  .chakan{
       overflow: auto;
       border-top: 1px solid gray;
       padding-top: 50px;
  }
</style>
